<template>
	<view class="container">
		<view class="list f f-w-w">
			<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
				<pc-flow :data="list" field="images" limitation @contact="mycontact">
					<template #default="{row,rowIndex}">
						<!-- <image :src="item.img" class="imgView" mode="widthFix"></image> -->
						<view class="listItem">
							<view class="titleName">
								{{row.content}}
							</view>
							<view class="botomUse f f-a-c f-j-b">
								<view class=" f f-a-c">
									<image :src="row.user.avatar||'/static/avat.png'" class="avaTou" mode=""></image>
									<!-- 	<image
									src="https://ask.dcloud.net.cn/uploads/avatar/001/67/43/81_avatar_max.jpg?=1613651270"
									class="avaTou" style="border-radius: 50%;" mode=""></image> -->
									<view class="name m-l-10 m-r-10">
										{{row.user.nickname}}
									</view>
									<image src="/static/richang/icon@2x.png" v-if="row.user.gender==2" class="sex"
										mode=""></image>
									<image src="/static/richang/icon_1@2x.png" v-if="row.user.gender==1" class="sex"
										mode=""></image>
								</view>
								<view class="f f-a-c">
									<image src="/static/richang/Frame@2x.png" v-if="row.liked" class="collect" mode="">
									</image>
									<image src="/static/richang/Frame_1@2x.png" v-else class="collect" mode=""></image>
									<view class="number m-l-10">
										{{row.likes}}
									</view>
								</view>
							</view>
						</view>
					</template>
				</pc-flow>
				<view v-if="list.length==0" class="zanwu">
					<image src="/static/home/zanwu.png" class="img" mode=""></image>
					<view class="nameImg">
						还没有记录哦！
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				act: 0,
				list: [],
				page: 1,
				total: 0
			}
		},
		onShow() {
			this.list = []
			this.page = 1
			this.initList()
		},
		methods: {
			async initList() {
				let n = await this.$api.myThumbs({
					page: this.page
				})
				this.total = n.data.total
				let m = []
				n.data.rows.forEach(item => {
					item.images = item.images.split(',')[0]
					m.push(item)
				})
				this.list = [...this.list, ...n.data.rows]
			},
			// 跳转到发布笔记
			goPub() {
				uni.navigateTo({
					url: '/pages/Meowmate/PublishNotes'
				})
			},
			goDetils(item, index) {
				console.log(item, '8888888888888');
			},
			mycontact(e) {
				console.log(e, '99999999999');
				uni.navigateTo({
					url: '/pages/Meowmate/SocialDetails?id=' + e.id
				})
			},
			tabClick(item, index) {
				this.act = index
			},
			onreachBottom() {
				this.page++
				this.initList()
				// console.log('456789');
			}
		}
	}
</script>

<style scoped lang="scss">
	pc-flow {
		width: 100%;

	}

	.zanwu {
		margin-top: 50%;

		.img {
			width: 260rpx;
			height: 190rpx;
			margin-left: 50%;
			transform: translateX(-50%);
		}

		.nameImg {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-400;
			font-weight: 400;
			text-align: center;
			margin-top: 10rpx;
			color: $hui;
		}
	}

	/deep/ .pc_flow {
		width: 100% !important;
	}

	.list {
		height: 100vh;
		width: 100%;
		// background-color: pink;
		overflow-y: auto;
		width: 100%;
		margin: 0 auto;
		padding: 0 20rpx;
		box-sizing: border-box;

		.listItem {
			width: 100%;
			margin-right: 2%;
			margin-bottom: 32rpx;

			&:nth-child(2n) {
				margin-right: 0;
			}

			.imgView {
				width: 100%;

				.imgs {
					width: 100%;
				}
			}

			.botomUse {


				.avaTou {
					width: 42rpx;
					height: 42rpx;
				}

				.name {
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-400;
					font-weight: 400;
					text-align: LEFT;
					color: $hui;
				}



				.collect {
					width: 24rpx;
					height: 24rpx;
				}

				.number {
					font-size: 20rpx;
					font-family: PingFang SC, PingFang SC-400;
					font-weight: 400;
					text-align: LEFT;
					color: $hui;
				}
			}

			.sex {
				width: 20rpx;
				height: 20rpx;
			}

			.titleName {
				margin: 20rpx 0;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-500;
				font-weight: 600;
				text-align: LEFT;
				color: $hei;
				margin-top: 20rpx;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}

	.tab {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%);
		width: 25%;
		// margin-top: 60rpx;

		.life {
			position: relative;
			font-size: 36rpx;
			font-family: PingFang SC, PingFang SC-500;
			font-weight: 600;
			text-align: CENTER;
			color: $hui;

			.bgB {
				position: absolute;
				width: 60rpx;
				height: 52rpx;
				top: -10rpx;
				left: -10rpx;
			}
		}

		.active {
			font-size: 36rpx;
			font-weight: 600;
			text-align: CENTER;
			color: $hei;
		}
	}





	.container {
		height: 100vh;
		width: 100%;
		overflow-y: auto;
		background: #fffefc;
	}
</style>